<template>
  <div class="regular">
    <div class="main">
      <el-card shadow="always" class="Card">
        <div class="cardtitle">值班人员打卡地图</div>
        <div class="cardWrap">
          <el-card shadow="always" class="card">
            <div class="cardtext">今日值班总人数</div>
            <div class="cardnum">56</div>
          </el-card>
          <el-card shadow="always" class="card">
            <div class="cardtext">今日值班打卡人数</div>
            <div class="cardnum">46</div>
          </el-card>
          <el-card shadow="always" class="card">
            <div class="cardtext">今日值班未打卡人数</div>
            <div class="cardnum">10</div>
          </el-card>
          <el-card shadow="always" class="card">
            <div class="cardtext">今日值班打卡完成率</div>
            <div class="cardnum">82%</div>
          </el-card>
        </div>
        <div id="cardMap1"></div>
      </el-card>
      <div class="rightWrap">
        <el-card shadow="always" class="tableWrap">
          <div class="calendarWrap">
            <div style="width: 80px;">打卡时间</div>
            <el-config-provider :locale="local">
              <el-date-picker
                  v-model="punchTime"
                  type="date"
                  placeholder="选择日期"
              />
            </el-config-provider>
            <el-button type="primary" @click="punchRecord" style="margin-left: 20px;">
              <el-icon><Timer /></el-icon>
              &nbsp;查询
            </el-button>
            <el-button @click="modifyDuty">
              <el-icon><Edit /></el-icon>
              &nbsp;修改值班
            </el-button>
            <el-button @click="save">
              保存
            </el-button>
          </div>
        </el-card >
        <el-card shadow="always" class="tableWrap">
          <el-table v-show="isShowTableData" :data="tableData" stripe style="width: 100%">
            <el-table-column prop="worktime" align="center" label="时间">
              <template #default="scope">
                <span>{{ tableData[scope.$index]['worktime'] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="username" align="center" label="姓名" width="100">
              <template #default="scope">
                <span>{{ tableData[scope.$index]['username'] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="workcontent" align="center" label="内容">
              <template #default="scope">
                <span>{{ tableData[scope.$index]['workcontent'] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="position" align="center" label="位置">
              <template #default="scope">
                <span>{{ tableData[scope.$index]['position'] }}</span>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-show="isShowReviseTableData" :data="reviseTableData" stripe style="width: 100%">
            <el-table-column prop="starttime" align="center" label="开始时间">
              <template #default="scope">
                <div>
                  <span v-if="!isShowEdit">{{ scope.row.starttime }}</span>
                  <el-input
                      v-if="isShowEdit"
                      v-model.lazy="scope.row.starttime"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="username" align="center" label="姓名">
              <template #default="scope">
                <div>
                  <span v-if="!isShowEdit">{{ scope.row.username }}</span>
                  <el-input
                      v-if="isShowEdit"
                      v-model.lazy="scope.row.username"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="workcontent" align="center" label="内容">
              <template #default="scope">
                <div>
                  <span v-if="!isShowEdit">{{ scope.row.workcontent }}</span>
                  <el-input
                      v-if="isShowEdit"
                      v-model.lazy="scope.row.workcontent"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="position" align="center" label="地点">
              <template #default="scope">
                <div>
                  <span v-if="!isShowEdit">{{ scope.row.position }}</span>
                  <el-input
                      v-if="isShowEdit"
                      v-model.lazy="scope.row.position"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="endtime" align="center" label="结束时间">
              <template #default="scope">
                <div>
                  <span v-if="!isShowEdit">{{ scope.row.endtime }}</span>
                  <el-input
                      v-if="isShowEdit"
                      v-model.lazy="scope.row.endtime"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {getDutyInformations, reviseDutyInformation, saveDutyInformation} from "@/network/duty";
import {messageElMessage} from "@/utils/tips";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";

export default {
  name: 'RegularDuty',
  props: {
    msg: String
  },
  data(){
    return{
      calendar:false,
      tableData: [],
      reviseTableData: [],
      punchTime: null,
      local: zhCn,
      isShowEdit: true,
      isShowTableData: true,
      isShowReviseTableData: false
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = new Map({
        basemap: 'osm',
        layers: []
      })
      let view = new MapView({
        map: map,
        center: [113.34, 23.18],
        zoom: 13,
        container: "cardMap1",
      })

      const template = {
        // autocasts as new PopupTemplate()
        title: "{name}",
        // content: [{
        //   type: "fields",
        //   fieldInfos: [
        //     {
        //       fieldName: 'account',
        //       alias: 'account',
        //     },
        //     {
        //       fieldName: 'name',
        //       alias: 'name'
        //     },
        //     {
        //       fieldName: 'phone',
        //       alias: 'phone'
        //     },
        //     {
        //       fieldName: 'type',
        //       alias: 'type'
        //     },
        //     {
        //       fieldName: 'message',
        //       alias: 'message'
        //     }
        //   ]
        // }]
        // content: "{name}"
      };

      // Carbon storage of trees in Warren Wilson College.
      const featureLayer = new FeatureLayer({
        url: "https://1.116.87.141:6443/arcgis/rest/services/ny/myCampus/MapServer/0",
        popupTemplate: template
      });

      map.add(featureLayer)
      view.ui.remove("attribution")
      view.ui.remove("zoom")
    },
    // 格式化时间
    formatTime() {
      if (!this.punchTime) {
        messageElMessage("请选择时间", 'warning')
        return
      }
      let selectTime = new Date(this.punchTime)
      return selectTime.toLocaleDateString().replace(/\//g, '-')
    },
    // 修改值班信息
    modifyDuty() {
      let time = this.formatTime()
      if (!time) return
      this.isShowEdit = true
      this.isShowTableData = false
      this.isShowReviseTableData = true
      reviseDutyInformation(time)
        .then(res => {
          if (res.status !== 200 ||res.data.status !== 1) {
            messageElMessage("获取信息失败", 'error')
            return
          }
          this.reviseTableData = res.data.data
        })
        .catch((err) => {
          console.log(err)
          messageElMessage("获取信息失败", 'error')
        })

    },
    //  查询
    punchRecord() {
      let time = this.formatTime()
      if (!time) return
      this.isShowTableData = true
      this.isShowReviseTableData = false
      getDutyInformations(time)
          .then(res => {
            if (res.status !== 200 ||res.data.status !== 1) {
              messageElMessage("获取信息失败", 'error')
              return
            }
            this.tableData = res.data.data
          })
          .catch(() => {
            messageElMessage("获取信息失败", 'error')
          })
    },
    // 保存信息
    save() {
      saveDutyInformation(this.reviseTableData)
        .then(res => {
          if (res.status !== 200 || res.data.status !== 1) {
            messageElMessage("保存失败", 'error')
            return
          }
          messageElMessage("保存成功", 'success')
          this.isShowEdit = false
        })
      .catch(() => {
        messageElMessage("保存失败", 'error')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.regular{
  position: absolute;
  left: 12%;
  top: 6%;
  width: 88%;
  height: 94%;
  background-color: rgb(245, 245, 245);
}
.main{
  padding: 15px;
  display: flex;
}
#cardMap1{
    width: 100%;
    height: calc(96vh - 270px);
    border: 1px solid saddlebrown;
}
.Card{
  margin: 10px;
  width: 50%;
  height: calc(100vh - 100px);
}
.cardtitle{
  width: 140px;
  margin: 10px;
}
.cardWrap{
  display: flex;
}
.card{
  margin: 10px;
  background-color: rgb(248, 248, 248);
  width: 25%;
}
.cardtext{
  font-size: 12px;
}
.cardnum{
  margin-top: 10px;
  font-size: 20px;
  font-weight: 500;
}
.rightWrap{
  width: 50%;
}
.tableWrap{
  margin: 10px;
}
.calendarWrap{
  display: flex;
  align-items: center;
}
.is-selected {
  color: #1989fa;
}



</style>
